<template>
	<div class="wrapper">
		<div class='background'>
			<header>
				<div class="go-back"><i class="fa fa-reply" @click="goback"></i></div>
				<p>我的积分</p>
			</header>
		</div>

		<div class='myCredit'>
			<div class="TotalCredit">
				<div style="margin-left:2vw;" class="TotalNum">
					<h1 style="margin-left:1vw;"><strong>{{TotalCredit}}</strong></h1>
					<div style="font-size: 3vw;color :#838587;margin-top:1vw">
						可用积分总数
						<img style="width: 4vw;height: 4vw;" src="../assets/points.png">
					</div>
				</div>
				<div class="Exchange" @click="toExchange">
					<p style="font-size: 3.5vw;background-color: #F7B55E;;margin-left:30vw;border-radius: 15px;padding: 2vw;">兑换中心</p>
				</div>
			</div>

			<div class="ListCredit">
				<div style="display: flex;align-items: center;" class="ListCredit_left">
					<i v-if="flag==0" style="color:#372BF7;margin-right:1vw" class="fa fa-angle-double-right "></i>
					<p @click="togetAvailableCredit()">可用积分</p>
					<i v-if="flag==0" style="color:#372BF7;margin-left:1vw" class="fa fa-angle-double-left "></i>
				</div>
				|
				<div style="display: flex;align-items: center;" class="ListCredit_right">
					<i v-if="flag==1" style="color:#372BF7;margin-right:1vw" class="fa fa-angle-double-right "></i>
					<p @click="togetCreditByUserId()">积分记录</p>
					<i v-if="flag==1" style="color:#372BF7;margin-left:1vw" class="fa fa-angle-double-left "></i>
				</div>
			</div>

			<ul class="ListCreditInfo">
				<li v-for="item in CreditArr">
					<div class="ListCreditArr">
						<div class="ListCreditInfoa">
							<h3 style="font-size: 5vw;">{{item.num}} <img style="width: 4vw;height: 4vw;" src="../assets/points.png"></h3>
							<p style="font-size: 5vw">{{CreditTexts[item.channelType]}}</p>
						</div>
						<div class="ListCreditInfob">
							有效期限：
							{{item.createTime}}
							—<i class="fa fa-angle-right "></i>
							{{item.expiredTime}}
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MyCredit',
		data() {
			return {
				user: {},
				TotalCredit: 0,
				CreditArr: [],
				flag: 0,
				CreditTexts: [
					'消费兑换红包',
					'钱包充值',
					'订单支付',
				],
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			this.togetTotalCredit();
			this.togetAvailableCredit();
		},
		methods: {
			togetTotalCredit() {
				let url = `CreditController/getTotalCredit/${this.user.userId}`;
				this.$axios.get(url).then((response) => {
						this.TotalCredit = response.data.result;
					})
					.catch((error) => {
						console.error(error);
					});
			},
			togetAvailableCredit() {
				this.flag = 0;
				let url = `CreditController/getAvailableCredit/${this.user.userId}`;
				this.$axios.get(url).then((response) => {
						this.CreditArr = response.data.result;
					})
					.catch((error) => {
						console.error(error);
					});
			},
			togetCreditByUserId() {
				this.flag = 1;
				let url = `CreditController/getCreditByUserId/${this.user.userId}`;
				this.$axios.get(url).then((response) => {
						this.CreditArr = response.data.result;
					})
					.catch((error) => {
						console.error(error);
					});
			},
			togetCreditByUserIdAndChannelType() {
				let url = `CreditController/getCreditByUserIdAndChannelType/${this.user.userId}/${channelType}`;
				this.$axios.get(url).then((response) => {
						this.CreditArr = response.data.result;
					})
					.catch((error) => {
						console.error(error);
					});
			},
			toExchange() {
				this.$router.push({
					path: '/myCreditExchange',
					query: {
						TotalCredit: this.TotalCredit
					}
				});
			},
			goback() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style scoped="scoped">
	.wrapper {
		width: 100%;
		height: 100%;
	}

	.wrapper .background {
		width: 100%;
		height: 40%;
		background: linear-gradient(to bottom, #0097FF, #ffffff);
		border-radius: 15px;
	}

	.wrapper .background header {
		width: 100%;
		height: 12vw;
		/* background-color: #0097FF; */
		display: flex;
		/*justify-content: space-around;*/
		align-items: center;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	.wrapper header .go-back {
		padding: 0 32vw 0 2vw;
	}

	.wrapper .myCredit {
		width: 90%;
		height: 80%;
		position: absolute;
		top: 18vw;
		left: 5vw;
	}

	.wrapper .myCredit .TotalCredit {
		background-color: #fff;
		display: flex;
		align-items: center;
		border-radius: 15px;
		padding: 4vw 6vw;
	}

	.wrapper .ListCredit {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 8vw;
	}

	.wrapper .myCredit .ListCreditInfo {
		margin-top: 6vw;
	}

	.wrapper .myCredit .ListCreditInfo li .ListCreditArr {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 3vw;

		border: 1px solid #e0e0e0;
		/* 边框：1px 实线，浅灰色 */
		background-color: #fff;
		/* 背景色：浅灰色 */
		border-radius: 5vw;
		/* 可选：圆角效果 */
		padding: 3vw;
		/* 调整内边距，使内容不紧贴边框 */
	}

	.wrapper .myCredit .ListCreditInfo li .ListCreditArr .ListCreditInfoa {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
		padding-left: 8vw;
		padding-right: 16vw;
	}

	.wrapper .myCredit .ListCreditInfo li .ListCreditArr .ListCreditInfob {
		font-size: 3vw;
		color: #838587;
	}
</style>
